<template>
  <div id="department" class="department" />
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { getdepartment } from '@/api/index'

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getdepartment()
  },
  methods: {
    async getdepartment() {
      const { list } = await getdepartment()
      this.list = list
      this.DoughnutChart()
    },
    DoughnutChart() {
      echarts.use([GridComponent, BarChart, CanvasRenderer])

      var chartDom = document.getElementById('department')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        color: ['#2c9ef7'],
        title: {
          text: '部门人数分析',
          left: 'center',
          textAlign: 'top', // 位置
          textStyle: {
            // 文字颜色
            color: 'black'
          }
        },
        xAxis: {
          type: 'category',
          data: ['行政部', '人事部', '财务部', '技术部', '运营部', '市场部', '后勤部']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 人'
          }
        },
        series: [
          {
            data: this.list,
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: 'black',
                    fontSize: 12
                  },
                  formatter: '{c}人'
                }
              }
            }

          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>
.department{
    height: 400px;
}
</style>

DoughnutChart
